<!--
 * @Author: White
 * @description: 收藏歌单
 * @LastEditTime: 2021-09-01 12:02:20
-->

<template>
    <div class="created-playlist">
        <div class="collapse" @click="toggleCollapse" :style="{ 'color': theme.text }">
            <i :class="hasCollapsed ? 'el-icon-caret-bottom' : 'el-icon-caret-right'" class="icon-reset"/>
            <span>收藏的歌单</span>
        </div>
        <!-- 歌单列表 -->
        <div class="card-wrapper-loading"
            v-show="loading"
            v-loading="loading"
            element-loading-text="载入中..."
            element-loading-spinner="el-icon-loading">
        </div>

        <div class="all-playlist" v-show="hasCollapsed">
            <div class="playlist" 
                v-for="(item, index) in collectSongs" :key="index"
                @click="songListdetail(item.id)">
                <div class="content-left">
                    <span class="text" :style="{ 'color': theme.text }">{{ item.name }}</span>
                </div>
            </div>
        </div>
    </div>
</template>
  
<script>
import { useRouter } from 'vue-router'
import { reactive, onMounted,defineComponent, ref, toRefs, computed } from "vue"
import { useStore } from 'vuex'
import { getUsersongList } from '@/api/music'

export default defineComponent({
    setup() {
        const router = useRouter()
        const store = useStore()
        const theme = computed(() => store.state.theme)
        const hasCollapsed = ref(false)
        const data = reactive({
            loading: false,
            collectSongs: []
        })
        const params = reactive({
            uid: ''
        })
        onMounted(() => {
            have()
        })
        const getData = async () => {
            data.loading = true
            const res = await getUsersongList(params)
            if (res.data.code === 200) {
                data.collectSongs = res.data.playlist
                data.loading = false
            }
        }

        function have(){
            if (store.getters.userInfo.account) {
                params.uid = store.getters.userInfo.account.id
            }
        }

        // 歌单详情
        function songListdetail(id){
            router.push({ name: "songListdetail", params: { id: id } })
        }
        
        // 伸缩栏
        function toggleCollapse(){
            have()
            hasCollapsed.value = !hasCollapsed.value
            if (hasCollapsed.value === true) {
                getData()
            }
        }
        return {
            ...toRefs(data),
            theme,
            hasCollapsed,
            toggleCollapse,
            songListdetail
        }
    },
});
</script>
  
<style lang="scss" scoped>
.created-playlist::-webkit-scrollbar {
    width: 8px;    
    height: 8px;
}
.created-playlist::-webkit-scrollbar {
    -webkit-box-shadow: inset 0 0 5px rgba(146, 145, 145, 0.1);
}
.created-playlist::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(146, 145, 145, 0.1);
    background: rgba(138, 137, 137, 0.2);
}
.created-playlist {
    height: calc(100% - 60px);
    overflow: auto;
    .collapse {
        padding: 16px 0 10px 4px;
        font-size: 12px;
        cursor: pointer;
        .icon-reset {
            color: #bdbdbd;
        }
    }

    .all-playlist {
        box-sizing: border-box;
        .liked-playlist,
        .playlist {
            display: flex;
            align-items: center;
            height: 32px;
            padding-right: 8px;
            padding-left: 18px;
            cursor: pointer;
            &:hover {
                // background-color: #e5e5e5;
            }
            .content-left {
                width: 100%;
                height: 100%;
                flex: 1;
                display: flex;
                align-items: center;
                .text {
                    flex: 1;
                    font-size: 13px;
                    color: #333333;
                    margin-left: 8px;

                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    word-break: break-all;
                }
            }
            .icon-reset {
                margin-right: 10px;
            }
        }
    }
}
.card-wrapper-loading {
    height: calc(100vh - 420px);
    z-index: 9;
    top: 90px;
    :deep(.el-loading-spinner) {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    :deep(.el-icon-loading) {
        color: #666;
    }
    :deep(.el-loading-text) {
        margin-left: 2px;
        color: #666;
    }
}
</style>
  